<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            /* div {
                width: 500px;
                height: 500px;
                border-width: 20px;
                border-color: black;
                border-style: solid;
                box-sizing: border-box;
                简写
                border: 2px solid black
            } */

            /* div { */
                /* 内边框 */
                /* width: 500px; */
                /* height: 500px; */
                /* 完整写法 */
                /* padding-left: 10px;
                padding-right: 10px;
                padding-top: 10px;
                padding-bottom: 10px; */
                /* 简写(上开始顺时针) */
                /* 全部设置为固定值 */
                /* padding: 15px */
                /* 上下为10 左右为15 */
                /* padding: 10px 15px; */
                /* 上为10，左右为15，下为20px */
                /* padding: 10px 15px 20px; */
                /* 上 右 下 左 */
                /* padding: 5px 10px 15px 20px; */
                /* 设置不撑大盒子 */
                /* box-sizing: border-box; */
            /* } */

            /* 外边框 */
            div {
                width: 500px;
                height: 200px;
                border: 10px solid black;
                margin-top: 5px;
                margin-left: 10px;
                margin-right: 15px;
                margin-bottom: 20px;
                /* 简写同padding */
                margin: auto;
            }
        </style>
    </head>
    <body>
        <!-- 盒模型--边框border 内容content 内边距padding 外边距margin -->

        <!-- 边框 -->
        <!-- 基础属性，支持简写；可以对四个边框单独设置 -->
        <!-- border-width:粗细-->
        <!-- border-style:样式,默认没边框，solid实线，dashed虚线 dotted点线-->
        <!-- border-color:颜色   -->

        <!-- 边框使格子变大 -->
        <!-- 使用box-sizing: border-box;使外框大小不算入盒子 -->
        <!-- <div></div> -->

        <!-- 内边距 -->
        <!-- 基础写法：内容和边框之间的距离 -->
        <!-- <div>这是一个div</div> -->

        <!-- 外边距（盒子与盒子之间） -->
        <div></div>
        <div></div>
        <div></div>

        <!-- 块级水平居中 -->
        <!-- margin: auto--针对的是块级元素，不是文字 -->
        <!-- 去除浏览器默认样式 -->
        margin: 0;
        padding: 0;
    </body>
</html>